<template>
    <div>
      <ul>
          <li v-for="item,i in ping" :key="i">
              <div class="top">
                  <img style="width:10vw;height:10vw" :src="$image+item.user_img" alt="">
                  <dl>
                      <p style="font-size:14px;">{{item.username}}</p>
                      <div style="display:flex;">
                         <p style="font-size:10px;color:gray;margin:2vw 1vw 0 1vw;">服务</p>
                         <p style="font-size:10px;margin:2vw .8vw 0 .8vw;color:#333">超赞</p>
                          <p style="font-size:10px;color:gray;margin:2vw 1vw 0 1vw;">味道</p>
                         <p style="font-size:10px;margin:2vw .8vw 0 .8vw;color:#333">超赞</p>
                          <p style="font-size:10px;color:gray;margin:2vw 1vw 0 1vw;">包装</p>
                         <p style="font-size:10px;margin:2vw .8vw 0 .8vw;color:#333">超赞</p>
                          <p style="font-size:10px;color:gray;margin:2vw 1vw 0 1vw;">配送</p>
                         <p style="font-size:10px;margin:2vw .8vw 0 .8vw;color:#333">超赞</p>
                      </div>
                  </dl>
                  <p style="font-size:8px;color:gray;margin-left:4.5vw">{{item.ping_time}}</p>
              </div>
              <p>{{item.content}}</p>
              <div class="zhao">
                  <!-- <p>{{item.ping_img[0]}}</p> -->
                  <img v-for="items,index in item.ping_img" :key="index"  :src="$img+items" alt="">
              </div>
              <div class="hui" style="margin:1vw 0;">
                  <p style="">商家回复</p>
                  <dl>
                     
                      感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务，祝您生活愉快！
                  </dl>
              </div>
          </li>
      </ul>
    </div>
</template>

<script>
import {ajax_getPing} from '../ajax/index'
export default {
    name: '',
    data(){
        return{
          ping:[]
        }
    },
    methods:{

    },
    created(){
        ajax_getPing({}).then(res=>{
           
                res.data1.forEach((item,i,array) => {
                    item.ping_img=item.ping_img.substring(0,item.ping_img.length-1)
                    item.ping_img=item.ping_img.slice(1);
                    item.ping_img=item.ping_img.replace(/\"/g, "")
                    
                item.ping_img=item.ping_img.split(',');
                
               
              });
            //   console.log(res.data1)
              this.ping=res.data1;
        })
        
        
    }
}
</script>

<style scoped>
ul{
    width: 100vw;

}
ul>li{
    width: 92vw;
    padding: 4vw;
    padding-top: 0;
}
li>.top{
  display: flex;
  align-items: center;
}
li>p{
    margin-top: 1.5vw;
    width: 94vw;
     font-family: "楷体";
}
dl>p{
    font-family: "楷体";
    /* font-weight: 500; */
    font-weight: bold;
    margin-left: 1vw;
}
.hui{
    width: 96%;
    margin: 0 auto;
    padding:2vw;
    background-color: #eee;
    border-radius: 5px;

}
.hui>p{
    font-size: 13px;
    font-weight:bold;
    font-family: '宋体';
}
.hui>dl{
    font-size: 12px;
    margin: 1vw auto;
}
.zhao{
    margin: 1vw 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    
}
.zhao>img{
    /* width: 30%; */
    width: calc((100% - 6vw)/3);
    height: 100px;
    border-radius: 5px;
    margin-right: 2vw;
    margin-bottom:2vw;
}
</style>